//无参数的混合使用
//定义混合:.+混合名+(参数){css集合}
//调用混合:.+混合名+(参数)
//无参数的混合，加小括号的混合不会被编译到css中
.mixin1(){
    width:300px;
    height: 300px;
    background-color:#bfa;
    margin: 0 auto;
    margin-top:50px;
}
.header{
      .mixin1();
}
//定义混合时，没有加小括号，混合会被编译到css当中
.mixin2{
    width:300px;
    height: 300px;
    background-color:#efa;
    margin: 0 auto;
    margin-top:50px;
}
.footer{
    .mixin2;//调用时也可以不加小括号
}
//有参数的混合
.mixin3(@bg,@wid,@hei){//相当于形参
     width:@wid;
     height:@hei;
     background-color: @bg;
     margin: 0 auto;
    margin-top:50px;
    position: absolute;
    right: 0;
}
//默认参数
//没有参数的时候将采用默认值
.mixin4(@ww:1px,@ll:solid,@bb:red){
  border:@ww @ll @bb;
}
//@arguemnet  能够代表所有的形参
.mixin5(@x,@y,@mohu,@wy,@co){
    width:200px;
    height: 200px;
    background-color:#efa;
    box-shadow:@arguments;
    float: left;
}
.content{
    .mixin3(#bbf,300px,300px);//相当于实参
    .mixin4();
    .left{
        .mixin5(5px,5px,15px,5px,red);
    }
    .right{
        .mixin6(select1)//调用的时候必须是函数名+选择部分
    }
}
//匹配模式
//带@_参数的混合是匹配模式中必须的部分
.mixin6(@_){//这一个部分代表的是公共部分
    width:100px;
    height: 100px;
    float: right;
}
.mixin6(select1)
{
    background-color:blueviolet;
    border: 1px solid red; 
}
//无守卫的混合
.mixin7(@bgc){
    width:300px;
    height:200px;
}
//有守卫的混合,when相当于一个简单的判断
.mixin7(@bgc) when(@bgc>200)
{
    background-color:black;
}
.mixin7(@bgc) when(@bgc<200)
{
    background-color:green;
}
.container{
    .mixin7(302px)
}
//when(@bgc<200) and(@bgc>100)逻辑 与
//when(@bgc<200),(@bgc>100),逻辑 或
//when(@bgc<200)not(@bgc>100)逻辑 非


//文件导入模块化思想
@import url();
//转义字符~
